<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<div class="title" style="background: #d7493f;">
				<el-icon class="icon"><el-icon-user-filled /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
			</div>
			<div class="content">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">请选择</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-tabs v-model="wfset" class="demo-tabs">
						<el-tab-pane label="审批人设置" name="first"></el-tab-pane>
						<el-tab-pane label="表单及权限设置" name="second"></el-tab-pane>
						<el-tab-pane label="后续动作" name="third"></el-tab-pane>
						<div v-if="wfset=='first'">
							<el-form label-position="top">
								<el-form-item label="审批人员类型">
									<el-select v-model="form.setType" @change="changeSetType">
										<el-option :value="1" label="指定成员"></el-option>
										<el-option :value="2" label="主管"></el-option>
										<el-option :value="3" label="角色"></el-option>
										<el-option :value="4" label="发起人自选"></el-option>
										<el-option :value="5" label="发起人自己"></el-option>
										<el-option :value="7" label="连续多级主管"></el-option>
										<el-option :value="8" label="岗位"></el-option>
										<el-option :value="9" label="表单变量"></el-option>
									</el-select>
								</el-form-item>

								<el-form-item v-if="form.setType==1" label="选择成员">
									<el-button type="primary" icon="el-icon-plus" round
										@click="selectHandle(1, form.nodeAssigneeList)">选择人员</el-button>
									<div class="tags-list">
										<el-tag v-for="(user, index) in form.nodeAssigneeList" :key="user.id" closable
											@close="delUser(index)">{{user.name}}</el-tag>
									</div>
								</el-form-item>

								<el-form-item v-if="form.setType==2" label="指定主管">
									发起人的第 <el-input-number v-model="form.examineLevel" :min="1" /> 级主管
								</el-form-item>

								<el-form-item v-if="form.setType==3" label="选择角色">
									<el-button type="primary" icon="el-icon-plus" round
										@click="selectHandle(2, form.nodeAssigneeList)">选择角色</el-button>
									<div class="tags-list">
										<el-tag v-for="(role, index) in form.nodeAssigneeList" :key="role.id"
											type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
									</div>
								</el-form-item>

								<el-form-item v-if="form.setType==4" label="发起人自选">
									<el-radio-group v-model="form.selectMode">
										<el-radio :label="1">自选一个人</el-radio>
										<el-radio :label="2">自选多个人</el-radio>
									</el-radio-group>
								</el-form-item>

								<el-form-item v-if="form.setType==7" label="连续主管审批终点">
									<el-radio-group v-model="form.directorMode">
										<el-radio :label="0">直到最上层主管</el-radio>
										<el-radio :label="1">自定义审批终点</el-radio>
									</el-radio-group>
									<p v-if="form.directorMode==1">直到发起人的第 <el-input-number v-model="form.directorLevel"
											:min="1" /> 级主管</p>
								</el-form-item>
								<el-form-item v-if="form.setType==8" label="选择岗位">
									<el-button type="primary" icon="el-icon-plus" round
										@click="selectHandle(2, form.nodeAssigneeList)">选择岗位</el-button>
									<div class="tags-list">
										<el-tag v-for="(role, index) in form.nodeAssigneeList" :key="role.id"
											type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
									</div>
								</el-form-item>

								<el-divider></el-divider>
								<el-form-item label="多人审批时审批方式">
									<el-radio-group v-model="form.examineMode">
										<p style="width: 100%;"><el-radio :label="1">按顺序依次审批</el-radio></p>
										<p style="width: 100%;"><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
										<p style="width: 100%;"><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
									</el-radio-group>
								</el-form-item>
							</el-form>
						</div>
						<div v-if="wfset=='second'">
							<!-- 新表单的选择，或者是设置权限的表单  -->
							<div class="form-auth-table">
								<header class="auth-table-header">
									<div class="row">
										<div style="width: 50px;">序号</div>
										<div class="label">表单字段</div>
										<div class="label">字段key</div>
										<!-- 字段都展示出来 -->
										<el-radio-group v-model="globalFormOperate" class="radio-group"
											@change="changeAllFormOperate">
											<el-radio :label="2" style="margin-left: 1rem;">可编辑</el-radio>
											<el-radio :label="1">只读</el-radio>
											<el-radio :label="0">隐藏</el-radio>
										</el-radio-group>
									</div>
								</header>
								<div class="auth-table-body">

								</div>
							</div>

						</div>
						<div v-if="wfset=='third'"><!--流程结束后，要执行的一系列动作，最后一个节点就是流程结束后要执行的动作--></div>
					</el-tabs>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script setup name="approve">
	import {ref,watch,nextTick,inject,onMounted} from 'vue'
  import addNode from './addNode.vue' // 假设的组件路径，请根据实际情况修改

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		}
	})

	const emit = defineEmits(['update:modelValue'])

	const select = inject('select')

	const globalFormOperate = ref(null) // 统一设置节点表单权限
	const formTableData = ref([])
	const wfset = ref('first')
	const nodeConfig = ref({})
	const drawer = ref(false)
	const isEditTitle = ref(false)
	const form = ref({})
	const nodeTitle = ref(null) // 模板引用

	watch(() => props.modelValue, (newVal) => {
		nodeConfig.value = newVal
	})

	onMounted(() => {
		nodeConfig.value = props.modelValue
	})

	function show() {
		form.value = {}
		form.value = JSON.parse(JSON.stringify(nodeConfig.value))
		drawer.value = true
	}

	function editTitle() {
		isEditTitle.value = true
		nextTick(() => {
			nodeTitle.value.focus()
		})
	}

	function saveTitle() {
		isEditTitle.value = false
	}

	function save() {
		emit("update:modelValue", form.value)
		drawer.value = false
	}

	function delNode() {
		emit("update:modelValue", nodeConfig.value.childNode)
	}

	function delUser(index) {
		form.value.nodeAssigneeList.splice(index, 1)
	}

	function delRole(index) {
		form.value.nodeAssigneeList.splice(index, 1)
	}

	function selectHandle(type, data) {
		select(type, data)
	}

	function changeSetType() {
		form.value.nodeAssigneeList = []
	}

	function toText(nodeConfig) {
		if (nodeConfig.setType == 1) {
			if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
				const users = nodeConfig.nodeAssigneeList.map(item => item.name).join("、")
				return users
			} else {
				return false
			}
		} else if (nodeConfig.setType == 2) {
			return nodeConfig.examineLevel == 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
		} else if (nodeConfig.setType == 3) {
			if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {
				const roles = nodeConfig.nodeAssigneeList.map(item => item.name).join("、")
				return '角色-' + roles
			} else {
				return false
			}
		} else if (nodeConfig.setType == 4) {
			return "发起人自选"
		} else if (nodeConfig.setType == 5) {
			return "发起人自己"
		} else if (nodeConfig.setType == 7) {
			return "连续多级主管"
		}
	}
</script> 
<style>
</style>